<template>
  <div class="tabbar">
    <router-link to="/index">
      <div class="main"></div>
      <p>推荐</p>
    </router-link>
    <router-link to="/circle">
      <div class="circle"></div>
      <p>泳圈</p>
    </router-link>
    <router-link to="/find">
      <div class="find"></div>
      <p>发现</p>
    </router-link>
    <router-link to="/me">
      <div class="me"></div>
      <p>我的</p>
    </router-link>
  </div>
</template>

<style>
.tabbar {
  width: 100%;
  height: 70px;
  position: fixed;
  bottom: 0;
  display: flex;
}
.tabbar > a {
  display: block;
  width: 25%;
  height: 70px;
  background-color: #fff;
  color: #8a8a8a;
  position: relative;
  font-size: 14px;
  line-height: 100px;
  border-top: 1px solid #efefef;
}
.tabbar div {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-48%, 0);
}
.tabbar > .router-link-active {
  background-color: #efefef;
  color: #007bff;
}
.tabbar > .router-link-active div {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-48%, 0);
}
.tabbar .main {
  background: url(../assets/main_0.png) no-repeat;
  background-size: 30px;
}

.tabbar > .router-link-active .main {
  background: url(../assets/main_1.png) no-repeat;
  background-size: 30px;
}

.tabbar .circle {
  background: url(../assets/cart_0.png) no-repeat;
  background-size: 30px;
}
.tabbar > .router-link-active .circle {
  background: url(../assets/cart_1.png) no-repeat;
  background-size: 30px;
}
.tabbar .find {
  background: url(../assets/find_0.png) no-repeat;
  background-size: 30px;
}
.tabbar > .router-link-active .find {
  background: url(../assets/find_1.png) no-repeat;
  background-size: 30px;
}
.tabbar .me {
  background: url(../assets/me_0.png) no-repeat;
  background-size: 30px;
}
.tabbar > .router-link-active .me {
  background: url(../assets/me_1.png) no-repeat;
  background-size: 30px;
}
</style>
